<template>
    <ul v-if="this.orderListData.length > 0" class="orderListBox">
        <li v-for='(item,index) in this.orderListData' :key="item.id">
            <h2>
                <p>订单号：{{ item.orderNumber }}</p>
                <span>{{ orderStatus(item) }}</span>
            </h2>
            <div v-if="item.orderType == 3" class="bespokeContent" @click="toOrderDetail(index)">
                <div class="bespokeLeft">
                    <img v-if="item.integralGoods.goodsPic" :src="item.integralGoods.goodsPic[0]" alt="">
                </div>
                <div class="bespokeRight">
                    <!-- <p class="bespokeName">
                        <span>预计到达时间：</span>
                        <strong>{{ item.cmItem.arriveTime }}</strong>
                    </p> -->
                    <p class="manyi">
                        <span>商品名称：</span>
                        <span>{{ item.integralGoods.goodsName }}</span>
                    </p>
                    <p class="bespokeData">
                        <span>商品描述：</span>
                        <span>{{ item.integralGoods.goodsDesc }}</span>
                    </p>
                    <p class="bespokeData" style="font-size:50%;color:#F56C6C;text-align:right;">
                        共一件商品，合计:{{ item.integralGoods.integral }}积分 (￥{{item.integralGoods.goodsPrice}})
                    </p>
                </div>
            </div>
            <div v-else class="bespokeContent" @click="toOrderDetail(index)">
                <div class="bespokeLeft">
                    <img v-if="item.cmItem.image" :src="item.cmItem.image[0]" alt="">
                    <img v-else :src="item.defaultImage" alt="">
                </div>
                <div class="bespokeRight">
                    <p class="manyi">
                        <span>服务项目：</span>
                        <span>{{ item.cmItem.name }}</span>
                    </p>
                    <p class="bespokeData">
                        <span>服务时间：</span>
                        <span>{{ item.scheduledTime }}</span>
                    </p>
                    <p class="bespokeName" style="color:#F56C6C">
                        <strong>预计到达：</strong>
                        <strong>{{ item.arriveTime }}</strong>
                    </p>
                </div>
            </div>
            
            <div v-if="item.orderStatus == 4 && item.orderType != 3 " class="orderListbtn">
                <a @click="pingjia(index)">{{ rateButton(item) }}</a>
            </div>
        </li>
    </ul>
    <ul v-else class="orderListBox">
        <li><h3 style="text-align:center;color:#ccc;">暂无订单,请下单之后进入查看~</h3></li>
    </ul>
</template>

<script>
import { mapState,mapGetters,mapActions} from 'vuex'
export default {
    created(){
        this.getOrderListData();
    },
    computed: {
        ...mapState({
            orderListData:state => state.personModules.orderListData
        }),
        ...mapGetters({
            orderStatus:'personModules/orderStatus'
        }),
        rateButton(){
            return (item) => {
                if(item.evaluateStatus == 0){
                    return '评价'
                }else{
                    return '查看评价'
                }
            }
        }
    },
    methods:{
        ...mapActions({
            getOrderListData:"personModules/getOrderListData"
        }),
        pingjia(index){
            // return '/pingjia'
            this.$router.push({path:'/pingjia',query:{orderIndex:index}});
        },
        toOrderDetail(index){
            this.$router.push({path:'/orderDetail',query:{orderIndex:index}});
        }
    }
}
</script>


<style lang="scss">
    @import '@/assets/style/order.scss';
</style>
